<script lang="ts" setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { useThrottleFn } from '@vueuse/core'
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';

const SHOW_SCROLL = 2400
const MAX_SCROLL = 200

const { $fetch } = useFetch();
const isShow = ref(false)
const isVisible = ref(true)
const opacity = ref(0)

const opactiyChange = () => {
  opacity.value = ((document.documentElement.scrollTop - (SHOW_SCROLL - window.innerHeight)) / MAX_SCROLL >= 1) ? 1 : (document.documentElement.scrollTop - (SHOW_SCROLL - window.innerHeight)) / MAX_SCROLL
  isVisible.value =  document.documentElement.scrollTop > SHOW_SCROLL - window.innerHeight
}

const { data } = useAsyncData(
  'home:tempalte3:sidebar',
  () => $fetch('/suspend/infos'),
);

const handleClick = () => {
  isShow.value = !isShow.value
}

const throttleFn = useThrottleFn(opactiyChange, 10)

onMounted(() => {
  document.addEventListener('scroll', throttleFn)
})

onUnmounted(() => {
  document.removeEventListener('scroll', throttleFn)
})
</script>

<template>
  <template v-if="data && isVisible">
    <section class="page-home-sidebar" v-if="data.wechat || data.telephone || data.email || data.feedback">
      <div class="relative right--60px mx-auto flex justify-right container">
        <div class="top-button fixed bottom-296 z-10 w-48 border-1 border-hex-fff rounded-[24px_24px_4px_4px] border-solid bg-[linear-gradient(180deg,#F7F7F7_0%,#FFFFFF_100%)] pb-10 text-center shadow-[0_1px_6px_0_rgba(0,0,0,0.04)]">
          <div v-if="data.wechat || data.telephone || data.email" class="group mx-auto mt-6 w-36 cursor-pointer text-center" @click="handleClick">
            <div class="i-icons:float-wechat mx-auto size-36"></div>
            <span class="mt-4 text-14 text-hex-575757 font-400 group-hover:text-hex-3d7cfa">{{ $t('home.home.sidebar.link') }}</span>
          </div>
          <div v-if="data.feedback && (data.wechat || data.telephone || data.email)" class="mx-auto mt-8 h-1 w-32 border-t-1 border-t-hex-f7f7f7 border-solid"></div>
          <a class="group mx-auto mt-8 block" :href="data.feedback.link" target="_blank" v-if="data.feedback">
            <div class="i-icons:float-feedback mx-auto size-20 text-hex-3D7CFA"></div>
            <span class="mt-4 text-14 text-hex-575757 font-400 group-hover:text-hex-3d7cfa">{{ $t('home.home.sidebar.feedback') }}</span>
          </a>

          <div v-show="isShow" class="absolute right-59 top--50% z-10 w-196 border-2 border-hex-fff rounded-4 bg-hex-fff pb-18 shadow-[0_0_10px_rgba(0,0,0,0.08)] after:(absolute left-0 top-0 z-30 size-full rounded-4 bg-[linear-gradient(45deg,_#fff_0%,_rgba(250,250,250,0)_54%,_#bbeafe_100%)] content-empty) before:(absolute left-0 top-0 z-20 size-full rounded-4 bg-[linear-gradient(36deg,_#fff_0%,_rgba(250,250,250,0)_0%,_rgba(61,124,250,0.2)_100%)] content-empty)">
            <div class="relative z-100">
              <div v-if="data.wechat" class="mt-18">
                <p class="text-14 color-hex-8b8b8b font-400 leading-22">{{ $t('home.home.sidebar.wechat') }}</p>
                <div class="mx-auto mt-10 size-100 border-2 border-hex-3d7cfa rounded-6 border-solid bg-hex-fff p-2">
                  <img :src="data.wechat.content" alt="wechat" class="size-full object-cover">
                </div>
              </div>

              <div v-if="data.telephone" class="mt-20">
                <p class="text-14 color-hex-8b8b8b font-400 leading-22">{{ $t('home.home.sidebar.tel') }}</p>
                <p class="mt-10 truncate text-14 color-hex-292929 font-500 leading-20">{{ data.telephone.content }}</p>
              </div>

              <div v-if="data.email" class="mt-20">
                <p class="text-14 color-hex-8b8b8b font-400 leading-22">{{ $t('home.home.sidebar.email') }}</p>
                <p class="mt-10 truncate text-14 color-hex-292929 font-500 leading-20">{{ data.email.content }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </template>
</template>

<style lang="scss" scoped>
.page-home-sidebar {
  opacity: v-bind("opacity");
}
</style>
